<template>
  <div class="JNPF-common-layout">

    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input v-model="query.companynam" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="query.simplenam" placeholder="请输入" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业类型">
              <el-select v-model="query.type" placeholder="请选择" clearable>
                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName" :value="item.id"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="6">
              <el-form-item label="企业联系人">
                <el-input v-model="query.contact" placeholder="请输入" clearable> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人电话">
                <el-input v-model="query.phone" placeholder="请输入" clearable> </el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">
                展开
              </el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增
            </el-button>
          </div>
          <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange'>
          <el-table-column prop="companynam" label="企业名称" width="0" align="left" />
          <el-table-column prop="simplenam" label="企业简称" width="0" align="left" />
          <el-table-column label="企业类型" width="0" prop="type" algin="left">
            <template slot-scope="scope">
              {{ scope.row.type | dynamicText(typeOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="contact" label="企业联系人" width="0" align="left" />
          <el-table-column prop="phone" label="联系人电话" width="0" align="left" />
          <el-table-column prop="adress" label="企业地址" width="0" align="left" />
          <el-table-column prop="introduce" label="企业介绍" width="0" align="left" />
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑
              </el-button>
              <el-button type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row.id)">删除
              </el-button>
              <el-button type="text" v-if="!scope.row.receivebaseid" @click="addBase(scope.row)">基本信息
              </el-button>
              <el-button type="text" v-else @click="lookUrl(scope.row)">查看链接
              </el-button>
              <el-button type="text" v-if="scope.row.status=='2'" @click="playFa(scope.row)">制定方案
              </el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <Detail v-if="detailVisible" ref="Detail" @refresh="detailVisible=false" />
    <el-dialog title="基本信息" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="baseInfoVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="80%" >
      <template v-if="baseInfoVisible">
        <BaseInfo ref="BaseInfo" @refresh="refresh" />
      </template>
    </el-dialog>

   

    <el-dialog title="方案列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="playVisible"
      lock-scroll class="JNPF-dialog JNPF-dialog_center" width="80%" >
      <template v-if="playVisible">
        <playInfo ref="playInfo" @refresh="refresh" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import JNPFForm from './Form'
  import ExportBox from './ExportBox'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import Detail from './Detail'
  import BaseInfo from './components/busreceivebaseinfo/Form'; //填写拜访基本信息
  import playInfo from '@/views/buscompany/busreceiverplanmain/index'; //制定方案列表

  export default {
    components: {
      JNPFForm,
      ExportBox,
      Detail,
      BaseInfo,
      playInfo
    },
    data() {
      return {
        showAll: false,
        detailVisible: false,
        baseInfoVisible: false,
        playVisible: false,
        query: {
          companynam: undefined,
          simplenam: undefined,
          type: undefined,
          contact: undefined,
          phone: undefined,
        },
        treeProps: {
          children: 'children',
          label: 'fullName',
          value: 'id'
        },
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        },
        formVisible: false,
        exportBoxVisible: false,
        columnList: [{
            prop: 'companynam',
            label: '企业名称'
          },
          {
            prop: 'simplenam',
            label: '企业简称'
          },
          {
            prop: 'type',
            label: '企业类型'
          },
          {
            prop: 'contact',
            label: '企业联系人'
          },
          {
            prop: 'phone',
            label: '联系人电话'
          },
          {
            prop: 'adress',
            label: '企业地址'
          },
          {
            prop: 'introduce',
            label: '企业介绍'
          },
        ],
        typeOptions: [{
          "fullName": "私企",
          "id": "1"
        }, {
          "fullName": "国企",
          "id": "2"
        }],
        typeProps: {
          "label": "fullName",
          "value": "id"
        },
      }
    },
    computed: {
      menuId() {
        return this.$route.meta.modelId || ''
      }
    },
    created() {
      this.initData()
    },
    methods: {
      goDetail(id) {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(id)
        })
      },
      sortChange({
        column,
        prop,
        order
      }) {
        this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
        this.listQuery.sidx = !order ? '' : prop
        this.initData()
      },
      initData() {
        this.listLoading = true;
        this.baseInfoVisible = false;
        let _query = {
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        };
        request({
          url: `/api/example/BusCompany/getList`,
          method: 'post',
          data: _query
        }).then(res => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data)
          }
          this.list = _list
          this.total = res.data.pagination.total

          this.listLoading = false
        })
      },
      handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          request({
            url: `/api/example/BusCompany/${id}`,
            method: 'DELETE'
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg,
              onClose: () => {
                this.initData()
              }
            });
          })
        }).catch(() => {});
      },
      addOrUpdateHandle(id, isDetail) {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.JNPFForm.init(id, isDetail)
        })
      },
      addBase(row, isDetail) {
        this.baseInfoVisible = true
        this.$nextTick(() => {
          this.$refs.BaseInfo.init(row.id, row.receivebaseid, isDetail)
        })
      },
      lookUrl(row) {
        this.$confirm(location.origin + '/addBaseInfo?receivebaseid=' + row.receivebaseid, '查看', {
          type: 'warning',
          showCancelButton: false,
        }).then(() => {

        })
      },
      playFa(row) {
        this.playVisible = true
        this.$nextTick(() => {
          this.$refs.playInfo.init(row)
        })
      },
      exportData() {
        this.exportBoxVisible = true
        this.$nextTick(() => {
          this.$refs.ExportBox.init(this.columnList)
        })
      },
      download(data) {
        let query = {
          ...data,
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        }
        request({
          url: `/api/example/BusCompany/Actions/Export`,
          method: 'GET',
          data: query
        }).then(res => {
          if (!res.data.url) return
          this.jnpf.downloadFile(res.data.url)
          this.$refs.ExportBox.visible = false
          this.exportBoxVisible = false
        })
      },
      search() {
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      },
      refresh(isrRefresh) {
        this.formVisible = false;
        this.baseInfoVisible = false;
        if (isrRefresh) this.reset()
      },
      reset() {
        for (let key in this.query) {
          this.query[key] = undefined
        }
        this.search()
      }
    }
  }

</script>
